import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { DateRangePickerComponent, DateService, LvDateRangeTag } from '@iux/live';

@Component({
  templateUrl: './custom.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomComponent implements OnInit {
  currentInput: LvDateRangeTag = 'start';
  rangeDate: [Date, Date] = null;
  public fields = [];

  @ViewChild('UsageTemplate', { static: true }) usageTemplate: TemplateRef<any>;
  @ViewChild('NameTemplate', { static: true }) nameTemplate: TemplateRef<any>;
  @ViewChild('AddressTemplate', { static: true }) addressTemplate: TemplateRef<any>;
  @ViewChild('dateFilterTpl', { static: true }) dateFilterTpl: TemplateRef<any>;
  @ViewChild('dateRangePicker') dateRangePicker: DateRangePickerComponent;

  constructor(private dateService: DateService) {}

  ngOnInit() {
    this.fields = [
      {
        label: 'Status',
        field: 'status',
        type: 'single',
        option: {
          items: [
            { label: 'Normal', value: 'normal' },
            { label: 'Error', value: 'error' },
          ],
        },
      },
      {
        label: 'Capacity Usage',
        field: 'capacityUsage',
        type: 'number',
        mode: 'more',
        defaultValue: 7,
        option: {
          render: this.usageTemplate,
        },
      },
      {
        label: 'Name',
        field: 'name',
        type: 'textInput',
        defaultValue: 'test',
        option: {
          render: this.nameTemplate,
        },
      },
      {
        label: 'Address',
        field: 'address',
        type: 'customize',
        mode: 'startsWith',
        defaultValue: 'hangzhou',
        option: {
          render: this.addressTemplate,
        },
      },
      {
        label: 'DateRange',
        field: 'dateRange',
        type: 'customize',
        option: {
          render: this.dateFilterTpl,
          label: val => `${this.dateService.format(val[0], 'yyyy-MM-dd HH:mm:ss')}~${this.dateService.format(val[1], 'yyyy-MM-dd HH:mm:ss')}`,
        },
      },
    ];
  }

  onChange({ selectedFilters, currentFilter }): void {
    console.log('filters:', selectedFilters);
    console.log('currentFilter:', currentFilter);
  }

  rangeTagChange(tag: LvDateRangeTag): void {
    this.currentInput = tag;
  }

  disableOk(): boolean {
    const curValue = this.currentInput === 'start' ? this.rangeDate?.[0] : this.rangeDate?.[1];
    return (
      !curValue ||
      this.dateRangePicker?.getDateDisableState(curValue, this.currentInput, false) ||
      this.dateRangePicker?.checkDateDisableStatus(curValue, this.currentInput)
    );
  }

  onOk(onConfirm: () => void): void {
    if (this.rangeDate?.[0] && this.rangeDate?.[1]) {
      if (this.rangeDate[0] > this.rangeDate[1]) {
        [this.rangeDate[0], this.rangeDate[1]] = [this.rangeDate[1], this.rangeDate[0]];
      }
      onConfirm();
    } else {
      this.currentInput === 'start' ? (this.currentInput = 'end') : (this.currentInput = 'start');
    }
  }

  getOkLabel(): string {
    if (this.rangeDate?.[0] && this.rangeDate?.[1]) {
      return 'Confirm';
    } else {
      return this.currentInput === 'start' ? 'Choose End Date' : 'Choose Start Date';
    }
  }
}
